<template>
  <div class="common">
    <div class="slider" ref="sliderRef" v-show="isShow">
      <div class="content">
        <Slider ref="componentRef"></Slider>
      </div>
      <div class="slider-move">
        <div class="slider-move-track">
          <p v-text="tip"></p>
        </div>
        <div class="slider-move-btn" :class="{'doDown': DoDown, 'sliderBtnReset': sliderBtnReset}"
             @mousedown="useSlideVerifyStore().down($event)"
             @touchstart="useSlideVerifyStore().down($event)"></div>
      </div>
      <div class="bottom">
        <div class="btn close" @click="handleClose"></div>
        <div class="btn refresh" @click="refresh"></div>
      </div>
    </div>
  </div>

</template>
<script setup name="swipeVerify-common">

import {ref, onMounted, reactive, watch, computed} from "vue";
import Slider from '../slider/index.vue';
import useSlideVerifyStore from '@/stores/modules/slideVerify';


const moveX = computed(() => useSlideVerifyStore().moveX);
const tip = computed(() => useSlideVerifyStore().tip);
const sliderBtnReset = computed(() => useSlideVerifyStore().sliderBtnReset);
const DoDown = computed(() => useSlideVerifyStore().DoDown);

let captcha = {};
const sliderRef = ref();
const componentRef = ref();

const props = defineProps({
  isShow: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['close', 'open'])

onMounted(() => {
  // 清除默认事件
  useSlideVerifyStore().clearAllPreventDefault(sliderRef.value.children);
})

// 关闭滑块验证
function handleClose() {
  emit('close')
}

// 开启滑块验证
function handleOpen() {
  emit('open');
  refresh();
}

// 刷新
function refresh() {
  useSlideVerifyStore().refreshCaptcha().then(data => {
    // 调用子组件方法
    // componentRef.value.refresh();
    useSlideVerifyStore().initConfig(260, 159, 49, 159, 206);
  })
}

// 监听对象属性
watch(()=>props.isShow, (newValue, oldValue) => {
  if (newValue){
    refresh()
  }
},{ deep: true, immediate: true })


</script>
<style scoped>
.common {
  z-index: 20;
}

.slider {
  background-color: #fff;
  width: 278px;
  height: 285px;
  z-index: 999;
  box-sizing: border-box;
  padding: 9px;
  border-radius: 6px;
  box-shadow: 0 0 11px 0 #999999;
}

.slider .content {
  width: 100%;
  height: 159px;
  position: relative;
}

.slider .slider-move {
  height: 60px;
  width: 100%;
  margin: 11px 0;
  position: relative;
}

.slider .bottom {
  height: 19px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.refresh, .close, .slider-move-track, .slider-move-btn {
  background: url('@/assets/image/sprite.1.2.4.png') no-repeat;
}

.refresh, .close {
  display: inline-block;
  cursor: pointer
}

.slider-move .slider-move-track {
  line-height: 38px;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  color: #88949d;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.slider {
  user-select: none;
}

.slider-move .slider-move-btn {
  transform: translate(v-bind(moveX+ "px"), 0px);
  background-position: -5px 11.79625%;
  position: absolute;
  top: -12px;
  left: 0;
  width: 66px;
  height: 66px;
}

.doDown {
  background-position: -5px 31.0092% !important;
}

.sliderBtnReset {
  background-position: -5px 11.79625%;
  transform: translate(0px, 0px) !important;
}

.slider-move-btn:hover, .close:hover, .refresh:hover {
  cursor: pointer
}

.btn {
  width: 20px;
  height: 20px;
}

.bottom .close {
  background-position: 0 44.86874%;
}

.bottom .refresh {
  background-position: 0 81.38425%;
}


</style>
